body {

}

.container {
    margin: 100px 100px;
    height: 300px;
    width: 300px;
    background: linear-gradient(90deg, yellow, red);
    box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
}

.bun {
    padding: .3em .8em;
    border: 1px solid #446d88;
    background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
    border-radius: .2em;
    box-shadow: 0 .05em .25em gray;
    color: white;
    text-shadow: 0 -.05em .05em #335166;
    font-size: 180%;
    line-height: 1.5;
}

button.cancel {
    background-color: #c00;
    padding: .3em .8em;
    border: 1px solid #446d88;
    background: linear-gradient(hsla(0, 0%, 100%, .2), transparent);
    border-radius: .2em;
    box-shadow: 0 .05em .25em gray;
    color: white;
    text-shadow: 0 -.05em .05em #335166;
    font-size: 180%;
    line-height: 1.5;
}

button.ok {
    background-color: #6b0;
    padding: .3em .8em;
    border: 1px solid #446d88;
    background: linear-gradient(hsla(0, 0%, 100%, .2), transparent);
    border-radius: .2em;
    box-shadow: 0 .05em .25em gray;
    color: white;
    text-shadow: 0 -.05em .05em #335166;
    font-size: 180%;
    line-height: 1.5;
}

.meaning {
    margin: 150px;
    width: 300px;
    background: #665;
    padding: .8em;
}

.meaning > div {
    background: tan;
    border-radius: .8em;
    padding: 1em;
    box-shadow: 0 0 0 .6em #655;
    outline: .6em solid #655;
}

.box {
    /*position: absolute;*/
    /*top: 100px;*/
    /*left: 500px;*/
    /*width: 300px;*/
    /*height: 200px;*/
    /*background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);*/
    /*}*/
    position: absolute;
    top: 100px;
    left: 500px;
    width: 300px;
    height: 300px;
    background: white;
    background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),
    linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
    background-size: 30px 30px;

}

.sheet {
    position: absolute;
    top: 100px;
    left: 1000px;
    width: 200px;
    height: 200px;
    background: #58a;
    background-image: linear-gradient(white 2px, transparent 2px),
    linear-gradient(90deg, white 2px, transparent 2px),
    linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
    linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
    background-size: 75px 75px, 75px 75px, 15px 14px, 15px 15px;
}

.bot {
    position: absolute;
    top: 500px;
    left: 550px;
    width: 200px;
    height: 200px;
    background: #665555;
    background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

.qipan {
    position: absolute;
    top: 500px;
    left: 900px;
    width: 235px;
    height: 235px;
    background: #eee;
    background-image: linear-gradient(45deg, rebeccapurple 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
    linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
    background-position: 0 0, 15px 15px;
    background-size: 30px 30px;
}

.demo {
    margin: 100px;
    width: 500px;
    height: 200px;
    background: hsl(20, 40%, 90%);
    background-image: linear-gradient(90deg, #fb3 11px, transparent 0),
    linear-gradient(90deg, #ab4 23px, transparent 0),
    linear-gradient(90deg, #655 41px, transparent 0);
    background-size: 41px 100%, 61px 100%, 83px 100%;
}

.back {
    position: absolute;
    top: 900px;
    left: 650px;
    height: 100px;
    width: 300px;
    background: linear-gradient(white, white),
    url(../image/tel.jpg);
    background-size: cover;
    padding: 1em;
    border: 1em solid transparent;
    background-clip: padding-box, border-box;
    background-origin: border-box;
}

.noe {
    position: absolute;
    top: 900px;
    left: 1000px;
    width: 200px;
    height: 100px;
    padding: 1em;
    border: 16px solid transparent;
    background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%,
            transparent 0, transparent 50%) 0 / 5em 5em;
}

.one {
    margin: 50px;
    width: 200px;
    height: 100px;
    padding: 1em;
    border: 1px solid transparent;
    background: linear-gradient(red, red) padding-box,
    repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
    animation: ants 12s linear infinite;
}

.nov {
    border-top: .2em solid transparent;
    border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);
    padding-top: 1em;
}

.radi {
    background: #fb3;
    width: 200px;
    height: 100px;
    border-radius: 50%;
}

.num {
    position: absolute;
    top: 30px;
    left: 200px;
    width: 300px;
    height: 100px;
    background: #fb3;
    border-radius: 100% 0 0 0;
}

.button {
    width: 100px;
    height: 50px;
    padding: 10px;
    position: relative;
    color: #fff;
    transform: skewX(-45deg);
}

/*.button > div {*/
/*padding: 15px;*/
/*width: 100px;*/
/*height: 50px;*/
/*background: #58a;*/
/*transform: skewX(45deg);*/
/*}*/

.button::before {
    content: '';
    position: absolute;
    top: 0;
    right: -73px;
    bottom: -37px;
    left: -13px;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

.picture {
    margin: 20px;
    width: 300px;
    height: 300px;
    transform: rotate(45deg);
    overflow: hidden;
}

.picture > img {
    max-width: 100%;
    transform: rotate(272deg) scale(1.42);
}

img#hei {
    width: 200px;
    height: 200px;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transition: 1s clip-path;
}

img:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.note {
    position: absolute;
    top: 10px;
    left: 600px;
    width: 200px;
    height: 160px;
    background: #58a;
    background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
    linear-gradient(-135deg, transparent 15px, #58a 0) top right,
    linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
    linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

.rad {
    position: absolute;
    top: 10px;
    left: 810px;
    width: 200px;
    height: 160px;
    background: #58a;
    background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

.moon {
    position: absolute;
    top: 10px;
    left: 1020px;
    width: 200px;
    height: 100px;
    border: 20px solid transparent;
    border-image: 1 url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg"  width="3" height="3" fill="%2358a">\
    <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
    </svg>'
    );
    background: #58a;
    background-clip: padding-box;
}

.tab {
    position: absolute;
    top: -470px;
    left: 420px;
    position: relative;
    display: inline-block;
    padding: .5em 1em .35em;
    color: white;
}

.tab::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #58a;
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
}
